import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

// 配置路由，简单来说：url路径和组件之间的映射关系
const routes = [
  {
    path: '/', // 根路径
    name: 'Home', // 路由名称，用来唯一的标识每条路由，称为命名路由
    component: Home // 对应的组件
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue') // 路由懒加载，提高性能
  },
  {
      path:'/user',
      name:'User',
      component:() => import('../views/User.vue'),
      children:[ // 嵌套路由（子路由）
        {
          path:'login', // 相对路径 /user/login
          name:'login',
          component:() => import('../views/Login'),
          meta:{ // 当前路由的元信息，自定义的数据信息
            msg:'welcome',
            flag:true
          }
        },
        {
          path:'/user/regist/:name/:age/:sex', // 绝对路径
          name:'regist',
          component:() => import('../views/Regist')
        }
      ]
  },
  {
    path:'*', // 默认匹配
    // component:Home
    redirect:'/' // 重定向到指定url
  }
]

// 创建路由实例，需要指定路由选项
const router = new VueRouter({
  routes,
  // mode:'hash',
  mode:'history',
})

// 配置路由守卫
router.beforeEach( (to,from,next) => {
  // 如果访问主页，则放行
  if(to.path == '/'){
    return next()
  }
  // 如果用户未登陆，则跳转到主页
  const user = sessionStorage.getItem('user')
  if(!user){
    return next('/')
  }
  // 如果用户已登陆，则放行
  next()
})

export default router
